<template>
    <div class="customer-item" @click="handleItemClick">
    	<div v-if="!isCheckItem" class="avatar" :style="genAvatarStyle(data.customerName)">{{data.customerName.substr(0, 1)}}</div>
        <div v-if="isCheckItem" class="checkbox-container">
            <base-checkbox :value="checkModel" @input="handleCheckChange"></base-checkbox>   
        </div>
        <div style="padding-left: 0.2rem;width: calc(100% - 1.32rem);">
            <p class="customer-name">{{data.contactName}}</p>
            <p class="customer-number">{{data.code}}</p>
            <p class="customer-nexttime">{{data.currencyName+' '+data.totalAmount}}</p>
            <!--<p v-if="type === 'customer'" class="customer-nexttime">下次跟进：{{data.displayLastFollowTime | date}}</p>
            <p v-else class="customer-nexttime">原业务员：{{data.displaySalesman}}</p>-->
        </div>
        <div class="customer-item-right">
            <img v-if="data.displayType === '合作客户'" src="../../assets/customer-icon0.png" alt="">
            <img v-if="data.displayType === '潜在客户'" src="../../assets/customer-icon1.png" alt="">
            <span v-if="data.status ==1||data.status ==3" class="status1">草稿</span>
            <span v-if="data.status ==2||data.status ==6" class="status2">待批</span>
            <span v-if="data.status ==4" class="status3">执行</span>
            <span v-if="data.status ==8" class="status4">完成</span>
            <p class="customer-item-rightp1">{{data.quoteDate | date3}}</p>
            <p class="customer-item-rightp2">{{data.salemanId}}</p>
        </div> 
    </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },

    props: {
        isCheckItem: {
            type: Boolean,
            default: false
        },
        checkModel: {
            type: Boolean
        },
        data: {
            type: Object,
            required: true
        },
        type: {
            type: String,
            default: 'customer'
        }
    },
    methods: {
    	genAvatarStyle(name) {
            let colorList = [
                '#f0c828',
                '#6bb5ce',
                '#ffa63e',
                '#5e97f6',
                '#53d185',
                '#acd343',
                '#ff8e6b',
                '#2ccfbf'
            ]
            let code = name.charCodeAt(0)
            let color = colorList[code % 8]
            return {
                backgroundColor: color
            }
        },
        handleCheckChange(val) {
            this.$emit('update:checkModel', val)
        },
        handleItemClick(e) {
            e.preventDefault()
            if (!this.isCheckItem) return
            this.$emit('update:checkModel', !this.checkModel)
        }
    }
}
</script>
<style scoped>
.customer-item {
    width: 100%;
    height: 1.6rem;
    padding: 0.24rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    border-bottom: 2px solid #e6e9ec;
    background: #fff;
}
.customer-item .avatar {
    width: 0.72rem;
    height: 0.72rem;
    line-height: 0.72rem;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    margin-right: 0.28rem;
}
.customer-name {
    font-size: 0.3rem;
    color: #333333;
    line-height: 0.32rem;
    font-weight: bold;
    width: calc(100% - 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-number {
    font-size: 0.26rem;
    line-height: 0.52rem;
    color: #333333;
}
.customer-nexttime {
    font-size: 0.26rem;
    color: #999;
}
.customer-item-right {
    width: 1rem;
    height: 100%;
    position: absolute;
    right: 0.24rem;
    text-align: right;
}
.customer-item-right img {
    width: 0.32rem;
    height: 0.32rem;
    margin-bottom: 0.4rem;
}
.customer-item-rightp1 {
    color: #999999;
    font-size: 0.26rem;
    line-height: 0.52rem;
	
}
.customer-item-rightp2 {
    color: #999999;
    font-size: 0.26rem;
    line-height: 0.44rem;
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    white-space: nowrap;
}
.customer-item-right span{
	border-radius: 0.04rem;
	font-size: 0.26rem;
	padding: 0.02rem 0.1rem;
	color: #fff;
}
.status1{
	background: #999999;
}
.status2{
	background: #ff8125;
}
.status3{
	background: #5ab73c;
}
.status4{
	background: #a93f11;
}
</style>
